<script setup lang="ts">
import { ref, onMounted } from "vue";
//引入api
import {
  querySupplier,
  deleteSupplier,
  resetPassword
} from "../../api/supplier.js";
//引入图标
import { Delete, Edit } from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();

function add() {
  router.push("/supplier/add");
}

//表格数据
const tableData = ref([{ name: "" }]);

//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数

//查询条件

//账号启用状态
const value1 = ref(true);
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}

//重置查询条件
const supplier = ref({
  name: "",
  sales_name: "",
  sales_phone: ""
});

function reset() {
  (supplier.value.name = ""),
    (supplier.value.sales_name = ""),
    (supplier.value.sales_phone = "");
  initData();
}

//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    name: supplier.value.name,
    sales_name: supplier.value.sales_name,
    sales_phone: supplier.value.sales_phone
  };
  let res = await querySupplier(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//删除当前行数据
async function deleteData(id) {
  ElMessageBox.confirm("确定要删除数据？", "删除", {
    confirmButtonText: "删除",
    cancelButtonText: "关闭",
    type: "warning"
  })
    .then(async () => {
      let res = await deleteSupplier(id);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        // 在删除成功后调用 initData 函数刷新页面数据
        initData();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
      // 在删除成功后调用 initData 函数刷新页面数据
      initData();
    });
}
//编辑当前行数据
async function edit(id) {
  router.push({ path: "/supplier/edit", query: { id } });
}

//重置当前行数据的密码
function resetPwd(id) {
  ElMessageBox.confirm("是否要重置密码？", "重置密码", {
    confirmButtonText: "重置",
    cancelButtonText: "关闭",
    type: "warning"
  })
    .then(async () => {
      let res = await resetPassword(id);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: res.msg
        });
        // 在删除成功后调用 initData 函数刷新页面数据
        await initData();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消重置"
      });
      // 在删除成功后调用 initData 函数刷新页面数据
      initData();
    });
}

//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<template>
  <div>
    <el-form>
      <el-row>
        <el-col style="padding-left: 20px" :span="6">
          <el-form-item label="供应商名称">
            <el-input v-model="supplier.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="padding-left: 20px" :span="6">
          <el-form-item label="销售联系人">
            <el-input v-model="supplier.sales_name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="padding-left: 20px" :span="6">
          <el-form-item label="销售联系电话">
            <el-input v-model="supplier.sales_phone" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="padding-left: 20px" :span="5">
          <el-button type="primary" @click="initData">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <div>
        <el-button type="primary" style="float: right" @click="add"
          >添加</el-button
        >
      </div>
      <!--客户列表-->
      <el-table
        size="small"
        :data="tableData"
        style="width: 100%"
        stripe
        border
      >
        <el-table-column
          type="index"
          label="行号"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="name"
          label="供应商公司名称"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="sales_name"
          label="销售联系人"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="sales_phone"
          label="销售联系电话"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop="productType"
          label="主营产品类型"
          width="120"
          header-align="center"
        />
        <el-table-column
          prop="quotation"
          label="报价系数"
          width="70"
          header-align="center"
        />
        <el-table-column label="交付率" width="70" header-align="center" />
        <el-table-column label="质量投诉率" width="70" header-align="center" />
        <el-table-column label="延误交付率" width="70" header-align="center" />
        <el-table-column
          label="年度采购金额"
          width="70"
          header-align="center"
        />
        <el-table-column label="账号启用" width="70" header-align="center"
          >
          <template v-slot="{ row }">
            <el-switch v-model="row.id" />
          </template>
        </el-table-column>

        <el-table-column label="操作" header-align="center" align="center">
          <template v-slot="{ row }">
            <el-link
              style="padding-left: 10px; color: dodgerblue"
              :underline="false"
              @click="edit(row.id)"
              >编辑</el-link
            >
            <el-link
              style="padding-left: 10px; color: dodgerblue"
              :underline="false"
              @click="resetPwd(row.id)"
              >重置密码</el-link
            >
            <el-link
              style="padding-left: 10px; color: dodgerblue"
              :underline="false"
              @click="deleteData(row.id)"
              >删除</el-link
            >

            <el-link
              style="padding-left: 10px; color: dodgerblue"
              :underline="false"
              >累计采购</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div
        style="
          background-color: #fff;
          height: 50px;
          line-height: 50px;
          text-align: right;
        "
      >
        <el-pagination
          background
          :page-size="pageSize"
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
          @size-change="chgsize"
          @current-change="chgpg"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
